<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="Description" content="ARCHIVE" />
		<meta name="Keywords" content="ARCHIVE" />
		<meta name="render" content="webkit" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>blog</title>
		<link rel="shortcut icon" href="" />
		<link href="//cdn.bootcss.com/normalize/5.0.0/normalize.min.css" rel="stylesheet">
		<link rel="stylesheet" href="vendor/font-awesome-4.6.3/css/font-awesome.min.css" />
		<!--<link rel='stylesheet' id='javin-font-css'  href='http://static.jiawin.com/wp-content/themes/jiawin/css/font-awesome.min.css?ver=1463202082' type='text/css' media='all' />-->
		<link rel="stylesheet" type="text/css" href="vendor/video-js.css" />
		<link rel="stylesheet" href="dist/core.css" />
		<script src="vendor/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="vendor/lazyload-js.js" type="text/javascript" charset="utf-8"></script>
		<script src="vendor/video.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="vendor/videojs-ie8.min.js" type="text/javascript" charset="utf-8"></script>-->

		<script>
			videojs.options.flash.swf = "vendor/video/video.swf";
		</script>
		<!--<script type="text/javascript">
			document.createElement('video');
			document.createElement('audio');
			document.createElement('track');
		</script>-->
		<!--[if lt IE 9]>
			<script src="http://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
			<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>

	<body>
		<header class="common-header">
			<div class="wrapper">
				<div class="common-header-topbar">
					<a href="" class="common-header-topbar-logo">
						<img class="lazy" src="img/about/07-02_03.png" data-original="img/about/07-02_03.png"/>
					</a>
					<div class="common-header-topbar-link clearfix">
						<i class="fa fa-twitter"></i>
						<i class="fa fa-facebook-f"></i>
						<i class="fa fa-rss"></i>
					</div>
				</div>
				<div class="common-header-site clearfix">
					<ul class="about-nav">
						<li>
							<a href="home.html">HOME</a>
						</li>
						<li>
							<a href="portfolio.html">PORTFOLIO</a>
						</li>
						<li>
							<a href="about.html">ABOUT</a>
						</li>
						<li>
							<a href="service.html">SERVICES</a>
						</li>
						<li>
							<a href="archive.html">ARCHIVE</a>
						</li>
						<li>
							<a href="blog.html" class="about-nav-active">BLOG</a>
						</li>
						<li>
							<a href="blog-detail.html">OTHER PAGES</a>
						</li>
						<li>
							<a href="contact-us.html">CONTACT US</a>
						</li>
					</ul>
					<i class="fa fa-search"></i>
				</div>
				<div class="common-header-nav-bar">
					<i class="fa fa-bars" id="navbar"></i>
					<i class="fa fa-user"></i>
					<p>
						<a href="#"><img class="lazy" src="img/index/07-02_03.png" data-original="img/index/07-02_03.png" alt="" /></a>
					</p>
				</div>
				<ul class="common-header-hide-nav" id="hidenav">
					<li>
						<a href="home.html" class="about-nav-active">HOME</a>
					</li>
					<li>
						<a href="portfolio.html">PORTFOLIO</a>
					</li>
					<li>
						<a href="about.html">ABOUT</a>
					</li>
					<li>
						<a href="service.html">SERVICES</a>
					</li>
					<li>
						<a href="ARCHIVE.html">ARCHIVE</a>
					</li>
					<li>
						<a href="blog.html">BLOG</a>
					</li>
					<li>
						<a href="blog-detail.html">OTHER PAGES</a>
					</li>
					<li>
						<a href="contact-us.html">CONTACT US</a>
					</li>
				</ul>
			</div>
			<div class="title">
				<div class="wrapper">
					<h1>BLOG</h1>
				</div>
			</div>
		</header>
		<section class="blog-container">
			<div class="container-inner clearfix">
				<section class="inner-content-left clearfix">
					<div class="content-left-part">
						<img class="lazy" src="img/blog/pic1.jpg" data-original="img/blog/pic1.jpg" alt="" />
						<h3 data-scroll-reveal="enter left and then ease-in-out 50px">7 Strategies to Market Your Business Online</h3>
						<div class="part-button-wrapper">
							<a class="part-button" data-scroll-reveal="enter left and then ease-in-out 50px">
								<i class="button-icon fa fa-calendar"></i> July 3, 2013
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.2s and then ease-in-out 50px">
								<i class="button-icon fa fa-user"></i> Michael Reimer
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.4s and then ease-in-out 50px">
								<i class="button-icon fa fa-bookmark"></i> Marketing, News
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.6s and then ease-in-out 50px">
								<i class="button-icon fa fa-commenting-o"></i> 2 Comments
							</a>
						</div>
						<p class="part-describe" data-scroll-reveal="enter bottom wait 0.1s and then ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentum ac ... </p>
						<article>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentumLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentumLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentum</p>
						</article>
						<hr />
					</div>

					<div class="content-left-part">
						<img class="lazy" src="img/blog/pic2.jpg" data-original="img/blog/pic2.jpg" alt="" />
						<h3 data-scroll-reveal="enter left and then ease-in-out 50px">Basic Post with Featured Image</h3>
						<div class="part-button-wrapper">
							<a class="part-button" data-scroll-reveal="enter left and then ease-in-out 50px">
								<i class="button-icon fa fa-calendar"></i> July 3, 2013
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.1s and then ease-in-out 50px">
								<i class="button-icon fa fa-user"></i> Michael Reimer
							</a>
							<a class="part-button" data-scroll-reveal="enter left  wait 0.2s and then ease-in-out 50px">
								<i class="button-icon fa fa-bookmark"></i> Marketing, News
							</a>
							<a class="part-button" data-scroll-reveal="enter left  wait 0.3s and then ease-in-out 50px">
								<i class="button-icon fa fa-commenting-o"></i> 2 Comments
							</a>
						</div>
						<p class="part-describe" data-scroll-reveal="enter bottom wait 0.1s and then ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentum ac ... </p>
						<article>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentumLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentumLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentum</p>
						</article>
						<hr />
					</div>

					<div class="content-left-part">
						<section class="part-video-wrapper">
							<div class="video-header clearfix">
								<span id="iconWrapper" class="video-header-icon-wrapper">
									<a class="video-wrapper-heart"></a>
									<div>heart</div>
									<a class="video-wrapper-share"></a>
									<div>share</div>
									<a class="video-wrapper-embed"></a>
									<div>embed</div>
								</span>
								<img class="lazy video-wrapper-header-pic" data-original="img/blog/video-pic.jpg" src="img/blog/video-pic.jpg"/>
								<span class="video-header-font">
									<p>Home Tracker Software</p>
									<p class="font-bottom">
										<span>from</span> Your Channel
								</p>
								</span>
							</div>
							<div class="video-content">
								<video id="video" class="video-js vjs-big-play-centered" controls preload="auto" width="100%" height="400" data-setup='{"example_option":true}'>
									<source src="vendor/video/video.mp4" type="video/mp4">
									<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
										<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
									</p>
								</video>
							</div>
						</section>
						<h3 data-scroll-reveal="enter left and then ease-in-out 50px">Video Post Example</h3>
						<div class="part-button-wrapper">
							<a class="part-button" data-scroll-reveal="enter left and then ease-in-out 50px">
								<i class="button-icon fa fa-calendar"></i> July 3, 2013
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.1s and then ease-in-out 50px">
								<i class="button-icon fa fa-user"></i> Michael Reimer
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.2s and then ease-in-out 50px">
								<i class="button-icon fa fa-bookmark"></i> Marketing, News
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.3s and then ease-in-out 50px">
								<i class="button-icon fa fa-commenting-o"></i> 2 Comments
							</a>
						</div>
						<p class="part-describe" data-scroll-reveal="enter bottom wait 0.1s and then ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentum ac ... </p>
						<hr />
					</div>

					<div class="content-left-part">
						<!--<img src="img/blog/img.jpg" alt="" />-->
						<audio src="vendor/video/audio.mp3" id="audio" controls="controls" style="background: #dbdbdb; width: 100%;
							height: auto;"></audio>
						<!--<button id="audioPlay">Play</button>
						<div class="duration-wrapper" id="durationWrapper">
							<div class="duration" id="duration">
							</div>
						</div>-->
						<h3 data-scroll-reveal="enter left and then ease-in-out 50px">Video Post Example</h3>
						<div class="part-button-wrapper">
							<a class="part-button" data-scroll-reveal="enter left and then ease-in-out 50px">
								<i class="button-icon fa fa-calendar"></i> July 3, 2013
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.1s and then ease-in-out 50px">
								<i class="button-icon fa fa-user"></i> Michael Reimer
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.2s and then ease-in-out 50px">
								<i class="button-icon fa fa-bookmark"></i> Marketing, News
							</a>
							<a class="part-button" data-scroll-reveal="enter left wait 0.3s and then ease-in-out 50px">
								<i class="button-icon fa fa-commenting-o"></i> 2 Comments
							</a>
						</div>
						<p class="part-describe" data-scroll-reveal="enter bottom wait 0.1s and then ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed nisi eget lectus iaculis congue. Nullam eleifend congue turpis, vel scelerisque massa fermentum ac ... </p>
						<hr />
					</div>

					<div class="content-left-page">
						<a class="page-active" data-scroll-reveal="enter left and then ease-in-out 100px">1</a>
						<a data-scroll-reveal="enter left wait 0.1s and then ease-in-out 50px">2</a>
						<a data-scroll-reveal="enter left wait 0.2s and then ease-in-out 50px">3</a>
						<a data-scroll-reveal="enter left wait 0.3s and then ease-in-out 50px">4</a>
						<a data-scroll-reveal="enter left wait 0.4s and then ease-in-out 50px">5</a>
					</div>
				</section>

				<section class="inner-content-right">
					<div class="content-right-part">
						<h3 data-scroll-reveal="enter from the top after 0.5s">Popular Posts</h3>
						<p data-scroll-reveal="enter right and then ease-in-out 50px">New Premium WordPress Theme - Blaco</p>
						<hr />
						<p data-scroll-reveal="enter right wait 0.1s and then ease-in-out 50px">Top Web Trends of 2013</p>
						<hr />
						<p data-scroll-reveal="enter right wait 0.2s and then ease-in-out 50px">Video Post Example</p>
						<hr />
						<p data-scroll-reveal="enter right wait 0.3s and then ease-in-out 50px">How Important is Twitter</p>
						<hr />
						<p data-scroll-reveal="enter right wait 0.4s and then ease-in-out 50px">Home Builders New Planning Solution</p>
					</div>

					<div class="content-right-part">
						<h3 data-scroll-reveal="enter from the top after 0.5s">Blog categories</h3>
						<p data-scroll-reveal="enter right and then ease-in-out 50px">News (4)</p>
						<p data-scroll-reveal="enter right wait 0.1s and then ease-in-out 50px">Website Releases (23)</p>
						<p data-scroll-reveal="enter right wait 0.2s and then ease-in-out 50px">Events (7)</p>
						<p data-scroll-reveal="enter right wait 0.3s and then ease-in-out 50px">Marketing (5)</p>
						<p data-scroll-reveal="enter right wait 0.4s and then ease-in-out 50px">Web Development (2)</p>
					</div>

					<div class="content-right-part">
						<h3 data-scroll-reveal="enter from the top after 0.5s">ARCHIVEs</h3>
						<p data-scroll-reveal="enter right and then ease-in-out 50px">March (4)</p>
						<p data-scroll-reveal="enter right wait 0.1s and then ease-in-out 50px">April (5)</p>
						<p data-scroll-reveal="enter right wait 0.2s and then ease-in-out 50px">May (3)</p>
						<p data-scroll-reveal="enter right wait 0.3s and then ease-in-out 50px">June (4)</p>
						<p data-scroll-reveal="enter right wait 0.4s and then ease-in-out 50px">July (2)</p>
					</div>
				</section>
			</div>
		</section>
		<footer class="common-footer">
			<div class="wrapper">
				<div class="common-footer-centent clearfix">
					<article class="common-footer-centent-left">
						<a href="" class="common-header-topbar-logo">
							<img src="img/about/捕获.JPG" data-original="img/about/捕获.JPG" data-scroll-reveal="enter left wait 1s and then ease-in-out 50px">
						</a>
						<div class="common-header-topbar-link clearfix" data-scroll-reveal="enter left and then ease-in-out 50px">
							<i class="fa fa-twitter"></i>
							<i class="fa fa-facebook-f"></i>
							<i class="fa fa-rss"></i>
						</div>
						<p data-scroll-reveal=" then ease-in-out 50px">
							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum gravida quam quis nunc rutrum placerat. Proin eu mi vitae neque veh interdum id nec turpis nam auctor faucibus sollicitudin.
						</p>
					</article>
					<article>
						<dl>
							<dt data-scroll-reveal="enter top and then ease-in-out 50px">CONTACT INFO</dt>
							<dd data-scroll-reveal="enter bottom and then ease-in-out 50px">222 Ave C South</dd>
							<dd data-scroll-reveal="enter bottom wait 0.2s and then ease-in-out 50px">Saskatoon</dd>
							<dd data-scroll-reveal="enter bottom wait 0.4s and then ease-in-out 50px">Canada S7K 2N5</dd>
							<dd data-scroll-reveal="enter bottom wait 0.6s and then ease-in-out 50px">info@deliver.ca</dd>
							<dt class="num" data-scroll-reveal="enter bottom wait 0.8s and then ease-in-out 50px">1.306.222.3456</dt>
						</dl>
					</article>
					<article>
						<dl class="quicklinks">
							<dt data-scroll-reveal="enter top and then ease-in-out 50px">QUICK LINKS</dt>
							<dd data-scroll-reveal="enter bottom and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>Portfolio</dd>
							<dd data-scroll-reveal="enter bottom wait 0.2s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>About </dd>
							<dd data-scroll-reveal="enter bottom wait 0.4s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>ARCHIVE</dd>
							<dd data-scroll-reveal="enter bottom wait 0.6s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>Blog</dd>
							<dd data-scroll-reveal="enter bottom wait 0.8s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>Dropdown</dd>
							<dd data-scroll-reveal="enter bottom wait 1s and then ease-in-out 50px"><i class="fa fa-chevron-right"></i>contact Us</dd>
						</dl>
					</article>
					<article class="common-footer-centent-right">
						<dl>
							<dt data-scroll-reveal="enter right and then ease-in-out 50px">NEWSLTTER</dt>
							<dd data-scroll-reveal="ease-in-out 50px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd>
						</dl>
						<input type="text" name="" id="" value="" placeholder="Emali" data-scroll-reveal="enter right and then ease-in-out 50px"/>
						<a href="#" class="ok" data-scroll-reveal="enter right and then ease-in-out 50px">OK</a>
					</article>
				</div>
				<div class="common-footer-button">
					<span class="copyright">
						copyright 2013
						<a href="#">Deliver</a>						
						. All Rights Reserved.
					</span>
					<span class="friendlink">
						<a href="#">ABOUT/</a>
						<a href="#">PRIVACY POLICY/</a>
						<a href="#">CONTACT</a>
					</span>
				</div>
			</div>
		</footer>
		
		<script type="text/javascript" charset="utf-8">
			$(function() {
				$("img").lazyload({
					placeholder: "images/loading.gif",
					effect: "fadeIn"
				});
			});
		</script>
		<script src="vendor/scrollReveal.js"></script>
		<script>
			(function() {
				window.scrollReveal = new scrollReveal({
					reset: true,
					move: '50px'
				});
			})();
		</script>
		<!--<script src="js/blog-audio.js" type="text/javascript" charset="utf-8"></script>
		<script>
			
			var duration = document.getElementById('duration');
			var xx = duration.style.width = 0;
			blogAudio.playAudio();
			blogAudio.duration(xx);
			
		</script>-->

		<script src="dist/core.js" type="text/javascript"></script>
		<script type="text/javascript">
			blog.display();
			blogVideo.links();
		</script>

	</body>

</html>